<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>drag</title>
    <script type="text/javascript" src="../jquery-1.7.1.min.js"></script>
    <style>
        .container {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .target {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .containerDrop {
            background-color: green;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div id="container" class="container" ondrop="drop(event)" ondragover="dragover(event)"
 ondragend="dragenter(event)" ondragleave="dragleave(event)"></div>
<div id="target" class="target" draggable="true" ondragstart="dragstart(event)"></div>
<img id="image" src="imooc.png" class="hide" />
<script>
    function dragover(e) {
        e.preventDefault();
    };
    var dragstart =function dragstart(e) {
        e.dataTransfer.setData("Text", e.target.id);
        e.dataTransfer.setDragImage($('#image').clone().removeClass('hide')[0],0,0)
    };
    var drop = function drop(e) {
        e.preventDefault();
        var data = e.dataTransfer.getData("Text");
        e.target.appendChild(document.getElementById(data));
    };
    var dragenter = function (e) {
        e.preventDefault();
        $('#container').addClass('containerDrop');
    };
    var dragleave = function (e) {
        e.preventDefault();
        $('#container').removeClass('containerDrop');
    }

</script>
</body>
</html>